<script setup lang="ts">
import {ref} from 'vue';

///可以是一个html对象或者null对象
const contextArea = ref<HTMLElement | null>(null);
///控制菜单是否展示
const menuVisible = ref(false);
///控制子菜单是否展示
const subMenuVisible = ref(false);
///菜单的X坐标
const menuX = ref(0);
///菜单的Y坐标
const menuY = ref(0);
///子菜单的Y坐标
const subMenuY = ref(0);
///宽度自适应
const subMenuWidth = ref('auto');

///绑定一菜单的基础样式
const subMenuStyle = ref({
  position: 'absolute' as const,
  top: '0px',
  left: '100%',
  zIndex: 1000,
  backgroundColor: '#fff',
  border: '1px solid #ccc',
  boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
  width: 'auto',
});

///显示子菜单
const showSubMenu = (event: MouseEvent, _item: string) => {
  const target = event.target as HTMLElement;
  const rect = target.getBoundingClientRect();
  subMenuY.value = rect.y;
  subMenuWidth.value = `${rect.width}px`;
  // subMenuStyle.value.left = `${rect.x}px`;
  subMenuStyle.value.top = `${30*3}px`;
  subMenuStyle.value.width = subMenuWidth.value;
  subMenuVisible.value = true;
};

///菜单的样式
const menuStyle = ref({
  position: 'absolute' as const,
  top: '0px',
  left: '0px',
  zIndex: 1000,
  backgroundColor: '#fff',
  border: '1px solid #ccc',
  textAlign: 'left',
  boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
});

///菜单的的显示
const showMenu = (event: MouseEvent) => {
  ///禁止事件冒泡
  event.stopPropagation();
  if (contextArea.value) {
    menuX.value = event.clientX;
    menuY.value = event.clientY;
    menuStyle.value.left = `${menuX.value}px`;
    menuStyle.value.top = `${menuY.value}px`;
    menuVisible.value = true;
  }
};

const handleMenuItemClick = (item: string) => {
  alert(`点击了${item}`);
  menuVisible.value = false;
  subMenuVisible.value = false;
};

const hideSubMenu = () => {
  subMenuVisible.value = false;
};

const hideMenu = () => {
  menuVisible.value = false;
  subMenuVisible.value = false;
};

</script>

<template>
  <!--绑定contextArea-->
  <div ref="contextArea" @click="showMenu($event)" class="context-area">
    学
  </div>
  <!--淡入效果-->
  <transition name="fade">
    <!--mouseleave监听鼠标移出的事件-->
    <div v-if="menuVisible" :class="menuStyle" class="menu" @mouseleave="hideMenu" @click.stop>
      <div style="font-size:16px;font-weight: bold;padding: 8px 12px; color: #1a1a1a">学习路线</div>
      <div class="menu-item" @click="handleMenuItemClick('培训任务学习')">培训任务学习</div>
      <div class="menu-item" @click="handleMenuItemClick('个人职业生命学习')">个人职业生命学习</div>
      <div
          class="menu-item"
          @mouseenter="showSubMenu($event, '菜单项3')"
          @mouseleave="hideSubMenu"
      >
        菜单项3
        <transition name="fade">
          <div
              v-if="subMenuVisible"
              :style="subMenuStyle"
              class="sub-menu"
              @click.stop
          >
            <div class="menu-item" @click="handleMenuItemClick('子菜单项1')">子菜单项1</div>
            <div class="menu-item" @click="handleMenuItemClick('子菜单项2')">子菜单项2</div>
          </div>
        </transition>
      </div>
    </div>
  </transition>
</template>

<style scoped>

.context-area {
  width: 200px;
  height: 30px;
  border-right: 1px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 32px;
  font-weight: bold;
  background-color: transparent;
  color: #FFFFFF;
}

.childStyle{
  color: #ffffff;
  display: flex;
  align-items: center;/*垂直居中对齐*/
  gap: 15px; /* 添加元素之间的间距 */
}
.main{
  width: calc(100vw - 30px);/* 原始宽度减去 30px 的间距 */
  display: flex;
  justify-content: space-between;
  align-items: center;/*垂直居中对齐*/
  height: 64px;
  background:  #004170;
}

.menu, .sub-menu {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 1000;
  border-radius: 6px;
  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
}
.menu-item {
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  color: #ABABAB;
  font-size: 14px;
}


.menu-item:hover {
  background-color: #f5f5f5;
  color: #0771FF;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>